<template lang="pug">
  .noticelist
    .toolbar
      .breadcrumbs 公告管理
      .el-button.el-button--danger(type="danger" @click="goadd()") 添加公告
    table.table
      tr
        th 发布时间
        th 公告内容
        th 操作
      tr(v-for="(item,index) in noticelist" :id="item.id" :key="index" class="tb")
        td.time
          span.createtime {{item.createTime}}
          el-date-picker(v-model="item.createTime" type="datetime" placeholder="选择日期时间" style="display:none;")
        td.cont
          span.content {{item.noticeContent}}
          input(v-model="item.noticeContent" style="display:none;" )
        td
          .button.update(v-if="!editable" @click="edit(item.id)") 修改
          .button.save(style="display:none;"  @click="updatenotice(item.id)") 保存
          .button.del(@click="del(item.id)") 删除
    .footer
      .m-pagination
        a(href="javascript:;" @click="gotopage(1)") 首页
        a(href="javascript:;" @click="gotopage(pageNow-1)") <
        a(v-for="(item,index) in pagecount" :key="index" @click="gotopage(item)" :class="{active:index+1==pageNow}" v-show="item-pageNow>=-2&&item-pageNow<3") {{index+1}}
        a(href="javascript:;" @click="gotopage(pageNow+1)") >
        a(href="javascript:;"  @click="gotopage(pagecount.length)") 末页
    notice(:notice="isShow")

</template>
<script>
import notice from './notice.vue'
export default {
  name:'noticelist',
  data(){
    return{
      pageNow:1,
      pageSize:10,
      noticelist:[],
      pagecount:'',
      editable:false,
      ruleForm:{
        date:'',
        desc:''
      },
      rules: {
        desc: [
          { required: true, message: '请输入内容', trigger: 'blur' },
        ],
        date: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ],
      },
      isShow:false
    }
  },
  mounted(){
    this.getnoticelist()
  },
  components: {
    notice: notice,
  },
  methods:{
    async getnoticelist(){
      let res = await this.$ajax.get(`xyssoManager/notice/queryAll?pageNow=${this.pageNow}&pageSize=${this.pageSize}`)
      let data = res.data
      if(data.code==200){
        this.noticelist = data.data
        this.total = data.size
        this.pagecount = []
        if (data.pageCount === null) {
          this.pagecount = 1
        } else {
          for(let i=1;i<parseInt(data.pageCount)+1;i++){
            this.pagecount.push(i)
          }
        }
      }
    },
    gotopage(item){
      if(item > this.pagecount) return
      if(item < 1) return
      this.pageNow = item
      this.getnoticelist()
    },
    goadd(){
      this.isShow = true
      setTimeout(()=>{
        this.isShow = false
      },1000)
    },
    edit(id){
      let $td = document.getElementsByClassName('tb')
      for(let i=0;i<$td.length;i++){
        for(let j=0;j<$td[i].getElementsByTagName("td").length;j++){
          $td[i].getElementsByTagName("td")[j].childNodes[0].style.display='inline-block';
          $td[i].getElementsByTagName("td")[j].childNodes[1].style.display='none';
        }
      }
      let $el = document.getElementById(id).getElementsByTagName("td")
      for(let i=0;i<$el.length;i++){
        $el[i].childNodes[0].style.display='none';
        $el[i].childNodes[1].style.display='inline-block';
      }
    },
    async updatenotice(id){
      let $el = document.getElementById(id).getElementsByTagName("td");

      for(let i=0;i<$el.length;i++){
        $el[i].childNodes[1].style.display='none';
        $el[i].childNodes[0].style.display='inline-block';
      }
      let list = {
        id:id,
        createTime:document.getElementById(id).getElementsByClassName('time')[0].getElementsByTagName('input')[0].value,
        noticeContent:document.getElementById(id).getElementsByClassName('cont')[0].childNodes[1].value
      }
      console.log(list);
      let res = await this.$ajax.post('xyssoManager/notice/update',list)
      let data = res.data
      if(data.code==200){
        this.$message.success('修改成功')
        this.getnoticelist()
      }
    },
    async del(id){
      let res = await this.$ajax.post('xyssoManager/notice/delete',{
        id:id
      })
      let data = res.data
      if(data.code==200){
        this.noticelist = this.noticelist.filter(d => d.id != id)
        this.$message.success('删除成功')
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
.noticelist
  margin 0 auto
  .toolbar
    width 100%
    height 70px
    line-height 70px
    background #fff
    border-bottom 1px solid #e0e0e0
    .breadcrumbs
      float left
      margin-left 30px
      font-size 18px
    .el-button
      float right
      margin-right 30px
      height 30px
      line-height 30px
      padding 0 15px
      margin-top 20px
      font-size 12px
  .table
    width 100%
    background #fff
    border-spacing 0
    padding 22px 30px 0 30px
    th
      height 40px
      line-height 40px
      font-size 12px
      color #999
      text-align left
      background #f5f5f5
      &:nth-child(1)
        width 20%
      &:nth-child(2)
        width 50%
      &:nth-child(3)
        width 30%
      &:first-child
        padding-left 100px
      &:last-child
        text-align right
        padding-right 85px
    td
      min-height 50px
      font-size 14px
      color #686868
      border-bottom 1px solid #eee
      text-align left
      box-sizing border-box
      padding 17px 0
      &.cont
        input
          outline none
          height 28px
          line-height 28px
          border 1px solid #bccde0
          text-indent 5px
      .button
        display inline-block
        width 50px
        text-indent 15px
        cursor pointer
        background-size 14px 14px
        background-position left 2px
        &.del
          background url('img/del.png') no-repeat
          color #e75a46
          margin-left 30px
        &.update
          background url('img/update.png') no-repeat
          color #38418a
        &.save
          background url('img/save.png') no-repeat
          color #38418a
      &:nth-child(1)
        width 20%
      &:nth-child(2)
        width 50%
      &:nth-child(3)
        width 30%
      &:first-child
        padding-left 54px
      &:last-child
        text-align right
        padding-right 30px

  .footer
      margin-top 20px
.m-pagination
  float right
  font-size 0
  a
    text-decoration  none
    display inline-block
    width 32px
    height 32px
    border-radius 5px
    text-align center
    line-height 32px
    margin-right 10px
    font-size 12px
    color #999
    background #fff
    &.active
    &:hover
      background #e75a46
      color #fff
    &:first-of-type
    &:last-of-type
      width 52px

</style>


